<!-- 优惠券管理 -->
<template>
	<view class="Issuecoupons">
		<u-tabs class="u-tabs" :list="list" :is-scroll="false" :current="current" @change="change" active-color="#EC5F2F" bar-width="90"></u-tabs>
		<view class="kong"></view>
		<view v-for="(item,index) in CouponsList" @click="getcouponspin(item.id,item.status_label)" :key="item.id" :class="item.styleStyle === 1 ? 'img-item' : 'img-item3' ">
			<view class="img-btn-tit">
				<image :src="item.coupon_img_1" mode="scaleToFill"></image>
				<!-- <view class="tit">
					<text>兑换记录 ></text>
				</view> -->
			</view>
			<view class="middle-text">
				<text>{{item.name}}</text>
				<view class="r-text">
					<text>￥</text>
					<text>{{item.price}}</text>
				</view>
			</view>
			<view class="middle2-text">
				<text>有效期：{{item.start_time}} 至 {{item.end_time}}</text>
			</view>
			<view v-show="item.yishixiao" class="r-state">
				<image src="../../../static/images/yishixiao.png" mode="aspectFit"></image>
			</view>
		</view>
		
		<view v-show="titShow" class="bottom-tit">
			<text>没有更多优惠券了</text>
		</view>
		<!-- 空状态页 -->
		<view v-show="emptyShow" class="empty-state">
			<image src="../../../static/images/kong.png" mode="aspectFit"></image>
			<!-- <p>暂未领取任何优惠券</p> -->
			<p>这里空空的...</p>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {shareMixins} from '../../../mixins/share.js'
	export default {
		mixins:[shareMixins],
		data() {
			return {
				shareData: {
				    title: '空港卡券联盟客户端',
				    path: '/pages/index/index' // 分享的页面路径
				},
				list: [
					{
						name: '全部'
					}, 
					{
						name: '未使用'
					}, 
					{
						name: '已使用',
					},
					{
						name: '已失效',
					},
					{
						name: '即将失效',
					}
				],
				current: 0,
				CouponsList:[],
				titShow:true,
				emptyShow:false,
				status:''
			}
		},
		onLoad(opt) {
			// console.log(opt.num)
			if(opt.num != 0 && opt.num != 1 && opt.num != 2 && opt.num != 3){
				this.getCouponsList()
			}else if(opt.num == 1){
				this.current = 1
				this.status = 0
				this.getCouponsList()
			}else if(opt.num == 2){
				this.current = 2
				this.status = 1
				this.getCouponsList()
			}else if(opt.num == 3){
				this.current = 3
				this.status = 'overdue'
				this.getCouponsList()
			}else if(opt.num == 0){
				this.current = 4
				this.status = 'expire'
				this.getCouponsList()
			}
		},
		methods: {
			async getCouponsList(){//获取卡券列表
				var data = {
					status: this.status
				}
				const res = await this.$myRequest({
					url:'/api/coupons/getCouponsList'+ this.$u.queryParams(data)
				}).then((res) => {
					this.CouponsList = res.data.data.data
					if(this.CouponsList.length === 0){
						this.titShow = false
						this.emptyShow = true
					}else{
						this.titShow = true
						this.emptyShow = false
					}
					this.CouponsList.forEach((i) => {
						i.yishixiao = false
						i.styleStyle = 1
						if(i.status_label == '已失效'){
							i.yishixiao = true
							i.styleStyle = 2
						}else if(i.status_label == '已使用'){
							i.yishixiao = true
							i.styleStyle = 2
						}
					})
				})
			},
			change(index) {//tabs下标
				this.current = index;
				switch (index){
					case 0:
						this.status = ''
						this.getCouponsList()
						break;
					case 1:
						this.status = 0
						this.getCouponsList()
						break;
					case 2:
						this.status = 1
						this.getCouponsList()
						break;
					case 3:
						this.status = 'overdue'
						this.getCouponsList()
						break;
					case 4:
						this.status = 'expire'
						this.getCouponsList()
						break;
					default:
						break;
				}
			},
			// async theFailure(){//即将失效卡券
			// 	const res = await this.$myRequest({
			// 		url:'/api/coupons/getInvalidCoupons'
			// 	}).then((res) => {
			// 		console.log(res)
			// 	})
			// },
			
			getcouponspin(id,status_label){//跳转优惠券核销页
			// console.log(status_label)
				if(status_label === '未使用'){
					uni.navigateTo({
						// url:'./couponspin/couponspin?user_coupon_id='+ id
						url:'../couponspin/couponspin?user_coupon_id='+ id
					})
				}else{
					this.$refs.uToast.show({
						title:'卡券已使用或过期!',
						type:'warning'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Issuecoupons {
		.u-tabs{
			position: fixed;
			width: 100%;
			height: auto;
			z-index: 99;
		}
		.kong{
			height: 110rpx;
		}
		.img-item{
			width: 92%;
			margin: auto;
			background-color: #FFFFFF;
			margin-bottom: 24rpx;
			border-radius: 20rpx;
			padding-bottom: 32rpx;
			.img-btn-tit{
				position: relative;
				image{
					width: 100%;
					height: 252rpx;
				}
				.tit{
					position: absolute;
					right: 20rpx;
					bottom: 14rpx;
					background-color: rgba(255,255,255,0.5);
					width: 146rpx;
					height: 42rpx;
					border-radius: 20rpx;
					text-align: center;
					text{
						color: #3C3C3C;
						font-size: 24rpx;
						line-height: 42rpx;
						margin: 0;
						padding: 0;
					}
				}
			}
			.middle-text{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 24rpx 24rpx 2rpx 24rpx;
				text{
					font-size: 40rpx;
					color: #3C3C3C;
					font-weight: bold;
				}
				.r-text{
					display: flex;
					align-items: center;
					text:nth-child(1){
						font-size: 32rpx;
						color: #EC5F2F;
					}
					text:nth-child(2){
						font-size: 52rpx;
						color: #EC5F2F;
					}
				}
			}
			.middle2-text{
				text{
					padding-left: 24rpx;
					font-size: 24rpx;
					color: #8B8B8B;
				}
			}
			.footer-text{
				padding: 34rpx 0 30rpx 24rpx;
				display: flex;
				justify-content: space-between;
				width: 85%;
				.bottom-text{
					text:nth-child(1){
						font-size: 28rpx;
						color: #3C3C3C;
						margin-right: 12rpx;
					}
					text:nth-child(2){
						color: #EC5F2F;
					}
				}
			}
			.r-state{
				position: relative;
				image{
					width: 90rpx;
					height: 90rpx;
					position: absolute;
					bottom: 0;
					right: 0;
				}
			}
		}
		.img-item3{
			width: 92%;
			margin: auto;
			background-color: #FFFFFF;
			margin-bottom: 24rpx;
			border-radius: 20rpx;
			padding-bottom: 32rpx;
			.img-btn-tit{
				position: relative;
				image{
					width: 100%;
					height: 252rpx;
				}
				.tit{
					position: absolute;
					right: 20rpx;
					bottom: 14rpx;
					background-color: rgba(255,255,255,0.5);
					width: 146rpx;
					height: 42rpx;
					border-radius: 20rpx;
					text-align: center;
					text{
						color: #8B8B8B;
						font-size: 24rpx;
						line-height: 42rpx;
						margin: 0;
						padding: 0;
					}
				}
			}
			.middle-text{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 24rpx 24rpx 2rpx 24rpx;
				text{
					font-size: 40rpx;
					color: #8B8B8B;
					font-weight: bold;
				}
				.r-text{
					display: flex;
					align-items: center;
					text:nth-child(1){
						font-size: 32rpx;
						color: #8B8B8B;
					}
					text:nth-child(2){
						font-size: 52rpx;
						color: #8B8B8B;
					}
				}
			}
			.middle2-text{
				text{
					padding-left: 24rpx;
					font-size: 24rpx;
					color: #8B8B8B;
				}
			}
			.footer-text{
				padding: 34rpx 0 30rpx 24rpx;
				display: flex;
				justify-content: space-between;
				width: 85%;
				.bottom-text{
					text:nth-child(1){
						font-size: 28rpx;
						color: #8B8B8B;
						margin-right: 12rpx;
					}
					text:nth-child(2){
						color: #8B8B8B;
					}
				}
			}
			.r-state{
				position: relative;
				image{
					width: 90rpx;
					height: 90rpx;
					position: absolute;
					bottom: -36rpx;
					right: 0;
				}
			}
		}
		.bottom-tit{
			text-align: center;
			margin-top: 94rpx;
			margin-bottom: 170rpx;
			text{
				font-size: 24rpx;
				color: #8B8B8B;
			}
		}
		.empty-state{
			text-align: center;
			image{
				width: 196rpx;
				height: 158rpx;
				margin-top: 146rpx;
				margin-bottom: 12rpx;
			}
			p{
				font-size: 28rpx;
				color: #8B8B8B;
				margin-bottom: 56rpx;
			}
			.btn{
				width: 306rpx;
				height: 76rpx;
				border-radius: 38rpx;
				margin: auto;
				display: flex;
				align-items: center;
				justify-content: center;
				background: linear-gradient(#FFEED9,#FFE7CB,#FFDDB9);
				text{
					font-size: 28rpx;
					color: #EC5F2F;
				}
				// text:nth-child(1){
				// 	font-size: 60rpx;
				// 	color: #EC5F2F;
				// 	margin-right: 12rpx;
				// }
			}
		}
	}
</style>
